<template>
  <view class="goods-detail">
    <!-- 轮播图 -->
    <u-swiper 
    :list="goodsDetail.pics"
    name="pics_big"
    height="500"
    img-mode="aspectFit"
    @click="handlePreviewImage"
    >
    </u-swiper>
    <!-- 商品价格 -->
    <view class="goods_price">￥{{ goodsDetail.goods_price }}</view>
    <!-- 商品名称 -->
    <view class="goods_name">{{ goodsDetail.goods_name }}</view>
    <!-- 图文详情 -->
    <!-- 
      uniapp + uview  3种方式实现富文本渲染
      1 原生小程序    rich-text     简单内容 使用它
      2 vue本身 技术  v-html 
      3 uview 提供有  u-parse      复杂内容 使用它
     -->
    <!-- <rich-text :nodes="goodsDetail.goods_introduce"></rich-text> -->
    <!-- <view v-html="goodsDetail.goods_introduce"></view> -->
    <u-parse :html="goodsDetail.goods_introduce"></u-parse>

    <!-- 底部栏 使用uview模板 -->
    <view class="navigation">
		<view class="left">
			<view class="item">
				<u-icon name="server-fill" :size="40" :color="$u.color['contentColor']"></u-icon>
				<view class="text u-line-1">客服</view>
			</view>
			<view class="item">
				<u-icon name="home" :size="40" :color="$u.color['contentColor']"></u-icon>
				<view class="text u-line-1">店铺</view>
			</view>
			<navigator open-type="switchTab" url="/pages/cart/cart" class="item car">
				<u-badge class="car-num" :count="totalNums" type="error" :offset="[-3, -6]"></u-badge>
				<u-icon name="shopping-cart" :size="40" :color="$u.color['contentColor']"></u-icon>
				<view class="text u-line-1">购物车</view>
			</navigator>
		</view>
		<view class="right">
			<view class="cart btn u-line-1" @click="handleAddCart">加入购物车</view>
			<view class="buy btn u-line-1">立即购买</view>
		</view>
	</view>
  </view>
</template>

<script>
// 引入辅助函数
import { mapMutations, mapGetters } from 'vuex';
export default {
    data(){
        return{
            // 商品详情的所有数据
          goodsDetail: null,
        }
    },
    // 计算属性
    computed:{
        // 用法 类似 mapMutations   全部都在官网上出现
      ...mapGetters('cart', ['totalNums']),
    },
    onLoad(options){
        // 接收页面跳转过来的参数 id 
        // console.log(options);
        // 根据id获取商品详情
        // this.getGoodsDetail(43984)
        this.getGoodsDetail(options.goods_id)
        // 测试有没有拿到store
        console.log(this.$store);
    },
    methods:{
       // ...mapMutations("模块的名称",["模块中的函数1","模块中的函数2",...]),
      ...mapMutations('cart', ['addCart']),
        // 根据id获取商品详情
        async getGoodsDetail(goods_id){
            const result = await this.$u.get('/goods/detail',{goods_id})
            // console.log(result);
            this.goodsDetail = result.message
        },
        // 点击轮播图  实现放大预览
        // index 被点击的图片下标
        handlePreviewImage(index){
            // 获取要放大预览的轮播图的url 组成新的数组
            const urls = this.goodsDetail.pics.map((v) => v.pics_big)
            // 获取当前被点击的图片的url
            const current = urls[index]
            // 实现放大预览
            uni.previewImage({urls, current})
        },
        // 点击加入购物车
        handleAddCart(){
          // 调用加入购物车mutation 把当前商品传递过去
          //  goodsDetail --> addCart
          // 没有使用辅助函数  vuex功能
          // this.$store.commit("cart/addCart",this.goodsDetail);
          // 用上辅助函数之后
          this.addCart(this.goodsDetail);
          // console.log(this.addCart);
        }
    }
}
</script>

<style lang="scss">
.goods-detail{
    // 因为绝对定位会脱标 所以要留好位置 避免遮住详情内容
    padding-bottom: 104rpx;
}
.navigation {
    // 绝对定位
  position: fixed;
  width: 100%;
  left: 0;
  bottom: 0;

	display: flex;
	margin-top: 100rpx;
	border: solid 2rpx #f2f2f2;
	background-color: #ffffff;
	padding: 16rpx 0;
	.left {
		display: flex;
		font-size: 20rpx;
		.item {
			margin: 0 30rpx;
			&.car {
				text-align: center;
				position: relative;
				.car-num {
					position: absolute;
					top: -10rpx;
					right: -10rpx;
				}
			}
		}
	}
	.right {
		display: flex;
		font-size: 28rpx;
		align-items: center;
		.btn {
			line-height: 66rpx;
			padding: 0 30rpx;
			border-radius: 36rpx;
			color: #ffffff;
		}
		.cart {
			background-color: #ed3f14;
			margin-right: 30rpx;
		}
		.buy {
			background-color: #ff7900;
		}
	}
}
</style>